<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	*{
		padding: 0px;
		margin: 0px;
	}	
	html{
		height: 100%;
		background: url(images/bg2.jpeg);
		background-size: 100% 100%;

	}
	ul{
		display: flex; /*弹性盒子布局*/
		width: 640px;
		height: 300px;
		margin: 450px auto;

	}

	ul>li{
		border: 2px black solid;  /*钢琴黑色的琴键*/
		flex: auto; /*让琴键跟随钢琴大小*/
		list-style: none;
		background:rgb(245 245 220);
		box-shadow: 0 0 1 5px black; /*给琴键设置阴影效果*/
		position: relative;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             
	}
	ul>li>span{
		display: block;
		width: 40px;
		height: 150px;
		background: rgba(69,78,132,1);
		position: absolute;
		right: -22px;
		z-index: 1;
	}
		div{
			position: absolute;
			width: 800px;
			left: 72%;
			margin-left:-600px ;
			font-size: 0;
			top: 0;
			z-index: -1;
			height: 650px;
			overflow:hidden ;
		}
		div>img{
			width: 80px;
			/*margin-top: 650px;*/
			/*animation: move 3s;*/
			position: relative;
			top: 650px;
		}
		/*音符从下向上移动*/
		@keyframes move{
			from{
				top: 400px;
				opacity: 1;
			}
			to{
				top: -100px;
				opacity: 0;
			}
		}
	</style>
</head>
<body>
<ul>
	<li><span></span></li>
	<li><span></span></li>
	<li><span></span></li>
	<li><span></span></li>
	<li><span></span></li>
	<li><span></span></li>
	<li><span></span></li>
	<li></li>
</ul>
<div>
	<img src="images/do.png" alt=""/>
	<img src="images/fa.png" alt=""/>
	<img src="images/la.png" alt=""/>
	<img src="images/mi.png" alt=""/>
	<img src="images/re.png" alt=""/>
	<img src="images/si.png" alt=""/>
	<img src="images/sol.png" alt=""/>
	<img src="images/do.png" alt=""/>
</div>
</body>
</html>
<script>
/*获取所有的琴键*/
let lis = document.getElementsByTagName("li");
//获得音符
let pics = document.getElementsByTagName("img")
//给琴键绑定点击事件
for(let i = 0; i < lis.length; i++){
	lis[i].onclick = function(){
		let music = document.createElement("audio"); //创建audio对象，用来播放音乐
		 //
		music.src=`mp3/${i+1}.mp3`;
		music.play();//播放音乐
		this.style.boxShadow = "none";//添加按键效果
		let _this = this;
		setTimeout(function(){
			_this.style.boxShadow = "0 0 15px black";
		},100);//间隔一段时间执行一次代码
		//给琴键对应的音符设置向上移动的动画
		pics[i].style.animation="move 3s";
		console.log(pics[i])
		setTimeout(function(){
			pics[i].style.animation="";
		},3000);
	}
}
// for(let i = 0; i < lis.length; i++){
// 	lis[i].onclick = function(){
// 		let music = document.createElement("audio"); //创建audio对象，用来播放音乐
// 		 //
// 		music.src=`mp3/${i+1}.mp3`;
// 		music.play();//播放音乐
// 		this.style.boxShadow = "none";//添加按键效果
// 		let _this = this;
// 		setTimeout(function(){
// 			_this.style.boxShadow = "0 0 15px black";
// 		},100);//间隔一段时间执行一次代码
// 		//给琴键对应的音符设置向上移动的动画
// 		pics[i].style.animation="move 3s";
// 		console.log(pics[i])
// 		setTimeout(function(){
// 			pics[i].style.animation="";
// 		},3000);
// 	}
// }
</script>
<!-- for(let i = 0; i < lis.length; i++){
	lis[i].onclick = function(){
		playMusic(i);
	}
}
	function playMsic(i){
		let music = document.createElement("audio"); //创建audio对象，用来播放音乐
		 //
		music.src=`mp3/${i+1}.mp3`;
		music.play();//播放音乐
		this.style.boxShadow = "none";//添加按键效果
		// let _this = this;
		setTimeout(function(){
			_this.style.boxShadow = "0 0 15px black";
		},100);//间隔一段时间执行一次代码
		//给琴键对应的音符设置向上移动的动画
		pics[i].style.animation="move 3s";
		console.log(pics[i])
		setTimeout(function(){
			pics[i].style.animation="";
		},3100);
	}
//绑定键盘事件
document.onkeydown = function(e){
	console.log(e);
	let i=0;
	if(e.keyCode == 65)
		i = 1;
	else if(e.keyCode == 83)
		i = 2;
	else if(e.keyCode == 68)
		i = 3;
	else if(e.keyCode == 70)
		i = 4;
	else if(e.keyCode == 74)
		i = 5;
	else if(e.keyCode == 75)
		i = 6;
	else if(e.keyCode == 186)
		i = 7;
	playMusic(i);
}
</script> -->